import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox, Row, Col, message } from 'antd';
import { Http } from '../../common/Utils';

const FormItem = Form.Item;

class LoginForm extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                Http.Post('/api/manager/login.json', values).then((resp) => {
                    if (resp.code === '0000') {
                        window.location = '/';
                    }
                });
            }
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit} className="login-form">
                <FormItem>
                    {getFieldDecorator('username', {
                        rules: [{ required: true, message: '请输入用户名!' }],
                    })(
                        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" />
                        )}
                </FormItem>
                <FormItem style={{marginBottom: '0'}}>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: '请输入密码!' }],
                    })(
                        <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
                        )}
                </FormItem>
                <FormItem>
                    <a href="" style={{ float: 'right' }}>忘记密码</a>
                    <div style={{ textAlign: 'center'}}>
                    <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
                        登 录
                    </Button>
                    </div>
                </FormItem>
            </Form>
        );
    }
}

const WrappedNormalLoginForm = Form.create()(LoginForm);

class Login extends React.Component {
    render() {
        return (
            <Row type="flex" justify="center" align="middle" style={{height: '600px'}}>
                <Col span={6}>
                    <div>
                        <h1 style={{textAlign: 'center'}}>用户登录</h1>
                        <WrappedNormalLoginForm />
                    </div>
                </Col>
            </Row>
        );
    }
}

export default Login;